// 浏览器本地存储
// localStorage
// sessionStorage
// cookie
import Cookies from 'js-cookie'
// js-cookie 封装了set和get可以设置浏览器cookie存取
// 共同点: 都可以来做浏览器本地存储, 比如做token的管理(存取删)
// 区别:
// localStorage 永久存储, 除非主动删除
// sessionStorage 会话存储, 关闭网页自动删除
// localStorage 同域名的不同浏览器标签页可以共享
// sessionStorage 只能在当前浏览器标签页使用
// 不同源的本地存储不共享

// cookie区别:
// 它会自动在浏览器携带给后台, 而localStorage/sessionStorage需要你自己拼接

const state = {
  sidebar: { // 侧边栏配置对象
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false
  },
  device: 'desktop'  // 设备标记
}

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  }
}

const actions = {
  // 切换侧边栏导航
  toggleSideBar ({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  // 关闭侧边栏
  // 原来写法
  // closeSideBar(store, val) {}
  // val =  { withoutAnimation: false }  val接收的传过来对象
  // 知识点: 形参对象的解构赋值
  // { withoutAnimation: withoutAnimation } = { withoutAnimation: false }
  // closeSideBar(store, { withoutAnimation }) {}
  // 总结: 接收实参里面withoutAnimation的值到此变量上
  closeSideBar ({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice ({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
